import Left from "./left";
import Right from "./right";
import {createContext, useContext, useState } from 'react'
import * as Components from '@/pages/components'
import Tools from "./tools";
import LayoutData from "./Vision2/LayoutData";
import OpNode from './Vision2/Node';
const Context = createContext(null);

export function useVisionStore():any {
  return useContext(Context)
}

export function useForceUpdate() {
  let [, update] = useState({})
  return function() {
    update({})
  }
}

const data = [
  {
    code: 'Table',
    id: 1,
    childMap: {
      header: {
        id: 2,
        dataProps: {
          receipt: ['Button'],
        },
        children: [{
          id: 4,
          code: 'Button',
        }]
      },
      body: {
        id: 3,
        dataProps: {
          receipt: ['TableCol'],
        },
        children: [{
          id: 5,
          code: 'TableCol',
        }]
      }
    }
  }
]
function buildOpNode(data) {
  let root = new OpNode({
    parent: null,
  })
  root.buildChildren(data)
  return root
} 
let RootNode = buildOpNode(data)
console.log(RootNode)
export default function HomePage() {
  let store = {
    event: {},
    components: Components.default,
    moveOpNode: null,
    data: RootNode,
    getOpNodeList: () => {
      let list:any = []
      function r(data) {
        data.forEach(item => {
          list.push(item)
          const {childrenMap, children} = item
          if(childrenMap && Object.keys(childrenMap).length ) {
            r(Object.values(childrenMap))
          }else if(children){
            r(children)
          }
        })
      }
      r(store.data.children)
      return list
    }
  }
  window.store = store


  return (
    <Context.Provider value={store as any}>
      <Tools/>
      <div className="content">
        <Left/>
        {/* <Right/> */}
        <LayoutData data={store.data} allComponent={Components.default}/>
      </div>
    </Context.Provider>
  );
}
